<template>
  <div class="home">
    <my-header class="header">
      <span class="left"></span>
      <span class="title">用户登录</span>
      <span class="right" @click="$store.commit('changeColor')">切换主题</span>
    </my-header>
    <div class="container">
      <my-input v-model="accound" label="手机号码">
        <i class="iconfont" :class="accIcon"></i>
      </my-input>
      <my-input v-model="pwd" label="密码">
        <i class="iconfont" :class="pwdIcon"></i>
      </my-input>
      <button class="btn" :disabled="disabled" @click="$router.push('/list')" v-main-color="$store.state.mainColor">登录</button>
    </div>
    
  </div>
</template>

<script>
import myHeader from '@/components/myHeader/myHeader'
import myInput from '@/components/myInput/myInput'
import { ref, watchEffect } from 'vue'
export default {
  name: 'Home',
  components: {
    myHeader,
    myInput
  },

  setup() {
    const accound = ref('') // 定义账号的数据
    const pwd = ref('') // 密码的内容
    const regAccound = /^1[356789]\d{9}$/ // 账号验证正则表达式
    const regPwd = /^[a-zA-Z][a-zA-Z0-9]{5}$/ // 密码验证正则表达式
    const accIcon = ref('') // 账号图标
    const pwdIcon = ref('') // 密码图标
    const disabled = ref(true) // 控制登录按钮是否可以点击
    watchEffect(() => {
      if(regAccound.test(accound.value)) {
        accIcon.value = 'iconCheckFilled'
      } else {
        accIcon.value = 'iconicon_tips_wrong'
      }
      pwdIcon.value = regPwd.test(pwd.value) ? 'iconCheckFilled' : 'iconicon_tips_wrong'
      if(accIcon.value == 'iconCheckFilled' && pwdIcon.value == "iconCheckFilled") {
        disabled.value = false
      } else {
        disabled.value = true
      }
      if(!accound.value) {
        accIcon.value = ''
      }
      if(!pwd.value) {
        pwdIcon.value = ''
      }
      
    })
    return {
      accound,
      pwd,
      accIcon,
      pwdIcon,
      disabled
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .container {
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .iconfont {
    margin-left: 5px;
    width: 20px;
    flex-shrink: 0;
  }
  .iconCheckFilled {
    color: yellowgreen;
  }
  .iconicon_tips_wrong {
    color: red;
  }
  .btn {
    width: 200px;
    height: 40px;
    outline: none;
    border: none;
    border-radius: 6px;
    color: #fff;
  }
  .btn[disabled] {
    background-color: #ccc !important;
    color: #333 !important;
  }
</style>
